<template>
  <div>
    <div @click="toSearch">
      <van-search class="ipt" placeholder="请输入搜索关键词" shape="round" />
    </div>

    <div class="contain">
      <ul class="navigation">
        <li class="navigation-item" v-for="item in categoryList" :key="item.id" @click="act(item.id)"
          :class="id == item.id ? 'active' : ''">
          {{ item.name }}
        </li>
      </ul>
      <div class="contain-r" v-if="img">
        <img class="img" :src="img.banner_url" alt="" />
        <p>{{ img.name }}</p>

        <ul class="contain-r-list">
          <li v-for="item in list" :key="item.id" class="contain-r-list-item" @click="toGoryList(item.id)">
            <img class="img" :src="item.wap_banner_url" alt="">
            <span>{{ item.name }}</span>
          </li>
          <li class="contain-r-list-item"></li>
          <li class="contain-r-list-item"></li>

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { start, currentaction } from '@/api/kind/kind'
import router from '@/router'
export default {
  name: 'KindApi',
  setup () {
    const active = ref(0)
    const categoryList = ref([])
    const img = ref({})
    const index = ref(0)
    const id = ref('')
    const list = ref([])
    const act = (ids) => {
      id.value = ids
    }
    const toSearch = () => {
      router.push('/home/search')
    }
    const toGoryList = (id) => {
      router.push({ path: '/kind/list', query: { id } })
    }
    start().then(res => {
      id.value = res.categoryList[index.value].id
      console.log('a1', res, id.value)
      categoryList.value = res.categoryList
      currentaction({ id: id.value }).then(resu => {
        list.value = resu.data.currentOne.subList
      })
    })
    watch(() => id.value, (newValue) => {
      console.log('oldValue', newValue, id.value)
      start().then(res => {
        console.log(res)
        img.value = res.categoryList.find(el => el.id === newValue)
        index.value = res.categoryList.findIndex(el => el.id === newValue)
        console.log(img.value)
        currentaction({ id: newValue }).then(resu => {
          console.log('resu', resu)
          list.value = resu.data.currentOne.subList
        })
      })
    })

    return { active, categoryList, list, img, id, act, toSearch, toGoryList, index }
  }
}
</script>

<style lang="scss" scoped>
@import './scss/index.scss'
</style>
